/**
 * Created by tanbingqin on 2020/5/18.
 */
import React from 'react'
import { Button } from 'antd'
import MultiSelector from 'components/template/multi-selector'

export default {
  key: 'multi-selector-v2',
  name: 'MultiSelectorV2 选择框多选',
  author: '谭冰沁',
  description: '下拉选择框，支持单选，多选，实时查询目前只支持前端搜索(替换list-searcher),searchForm该组件的标识为MultiSelectorV2',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'type', description: '组件的数据结构方法，本项目中存储在::share/selectorData.js::中，只能为已定义的数据结构中的一个的key值，数据结构配置见下方::selectorItem::。', type: 'string', defaultValue: '-'
      },{
        param: 'selectorItem', description: '如果::type::定义的数据结构并不能满足特定需求，可以通过改造数据结构并通过此值传入形成特定的选择器，具体配置见下方::selectorItem::。', type: 'object', defaultValue: '-'
      },{
        param: 'params', description: '::type::指定的数据结构或::selectorItem::数据内请求对应::url::时需要的参数。', type: 'object', defaultValue: '-'
      },{
        param: 'disabled', description: '是否禁用。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'value', description: '组件的值，格式为[{label, key}]。', type: 'array', defaultValue: '-'
      },{
        param: 'onChange', description: '组件的值发生改变时的回调。', type: 'function(value)', defaultValue: '-'
      },{
        param: 'filter', description: '选项过滤规则，接收原始数据对象，返回为true则显示，为false则不显示。', type: 'function(item)', defaultValue: 'item => true'
      },{
        param: 'isShowSelectAll', description: '是否有全选，多选模式下使用。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'newline', description: '内容是否可换行。', type: 'boolean', defaultValue: 'false'
      },{
        param: 'showArrow', description: '是否显示下拉小箭头。', type: 'boolean', defaultValue: 'true'
      },{
        param: 'dropDownStyle', description: '下拉框的样式。', type: 'object', defaultValue: '-'
      }],
      description: '::MultiSelector::与原::Selector::下的::MultiSelector::参数基本一致，但是只支持前端搜索。'
    },
    {
      title: 'selectorItem',
      data: [{
        param: 'url', description: '接口请求地址，参数会自带上方的::params::。', type: 'string', defaultValue: '-'
      },{
        param: 'label', description: '接口返回值数组形成的选项label显示的key字段或渲染label规则。', type: 'string|function(item)', defaultValue: '-'
      },{
        param: 'descriptionKey', description: '接口返回值数组形成的选项description显示的key字段或渲染description规则。', type: 'string|function(item)', defaultValue: '-'
      },{
        param: 'key', description: '接口返回值数组形成的选项的唯一标志。', type: 'string', defaultValue: '-'
      },{
        param: 'service', description: '外部自定义传入的获取数据接口服务。', type: 'function()', defaultValue: '-'
      },{
        param: 'enableKey', description: '接口返回值数组形成的选项description显示的禁用标志字段。', type: 'string', defaultValue: '-'
      },{
        param: 'disableKey', description: '接口返回值数组形成的选项description显示的禁用标志字段。', type: 'string', defaultValue: '-'
      }],
      description: '每一个::Selector::都是由一个::selectorItem::配置而来，在::MultiSelector::中目前为前端搜索。'
    }],
  example: [
    {
      title: '基础用法',
      description: '打开下拉框后选远程获取值，可设置::disabled::, 增量全选禁用文案::isAll::',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <MultiSelector
              type="setOfBooksByTenant"
              onChange={context.handleChange}
            />
            <br/>
            <br/>
            <MultiSelector type="setOfBooksByTenant" disabled />
            <br/>
            <br/>
            <MultiSelector type="setOfBooksByTenant" disabled isAll />
          </div>
        )
      }
    },
    {
      title: '多选',
      description: '默认多选使用，如需单选模式::single::设置为true。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <MultiSelector
              type="expense_type_category"
              onChange={context.handleChange}
              single
            />
            <br/>
            <br/>
            <MultiSelector
              type="expense_type_category"
              onChange={context.handleChange}
            />
          </div>
        )
      }
    },
    {
      title: '全选全部，是否展示内容可换行',
      description: '是否支持全选::isShowSelectAll:: 是否展示内容可换行::newline::。',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <MultiSelector
              type="expense_type_category"
              onChange={context.handleChange}
              isShowSelectAll
            />
            <br/>
            <br/>
            <MultiSelector
              type="expense_type_category"
              onChange={context.handleChange}
              isShowSelectAll
              newline
            />
          </div>
        )
      }
    },
    {
      title: '前端搜索',
      description: '支持按标题，描述，禁用tag搜索',
      state: {

      },
      getMethod: context => {
        return {
          handleChange: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <MultiSelector
              selectorItem={{
                url: '/api/expense/type/company/all/icons',
                label: 'name',
                key: 'id',
                enableKey: 'enable',
                descriptionKey: 'iconName'
              }}
              onChange={context.handleChange}
            />
          </div>
        )
      }
    },
  ]
}
